
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键字热度</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <script src="/echarts/echarts.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            white-space:nowrap;
        }
        body{
            background-color: #F3F5F7;
        }
        .layui-col-md11{
            min-width:1207px;
        }
        .headerCenter{
            margin-top: 10px;
            margin-left: 20px;
            width: 100%;
        }
        .canvas{
            margin-left: 20px;
        }
        .backColor{
            background-color: #F1F1F1;
        }
        .btnRight{
            float: right;
        }
        .layui-form-item .layui-input-inline{
            margin-right: -10px;
        }

        div#rMenu {
            position: fixed;
            visibility:hidden;
            top:0;
            text-align: left;
            padding:4px;
            width: 100px;
            height: 90px;
        }
        div#rMenu a{
            padding: 5px 30px 5px 30px;
            background-color:#cad4e6;
            /*vertical-align:middle;*/
        }
        .tabBorder{
            width: 100%;
        }
        .typeface{
            font-weight:bold;
            text-align:center;
        }
        #context{
            width: 100%;
            height: 350px;
        }
        th,td{
            width:12.5%;
        }
    </style>
</head>
<body>
<div class="layui-row" >
    <div class="layui-col-md11">
        <div class="layui-card headerCenter">
            <div class="layui-card-header backColor">
                关键词搜索统计图
                <div class="btnRight" style="margin-bottom: 10px">
                    <button onclick="refresh()" type="button" class="layui-btn layui-btn layui-btn-sm">
                        <i class="layui-icon layui-icon-refresh-1"></i>
                        刷新
                    </button>
                    <button onclick="backOff()" type="button" class="layui-btn layui-btn layui-btn-sm">
                        <i class="layui-icon layui-icon-return"></i>
                        返回
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row">
    <div class="layui-col-md11">
        <div class="layui-card headerCenter">
            <div class="layui-card-header backColor">
                <i class="layui-icon">&#xe613;</i>
                关键词搜索统计图
            </div>
            <div class="layui-card-body">
                <table class="tabBorder"  border="1">
                    <thead>
                        <tr>
                            <th>搜索关键词</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="typeface">
                            <td>搜索次数</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="layui-row ">
    <div class="layui-col-md11">
        <div class="layui-card headerCenter">
            <div class="layui-card-header backColor">
                <i class="layui-icon">&#xe629;</i>
                用户统计图表
            </div>
        </div>
    </div>
</div>
<div class="layui-row canvas">
    <div class="layui-col-xs11 layui-col-sm11 layui-col-md11">
        <div id="context">

        </div>
    </div>
</div>
</body>
<script>
    var $;
    var layer;
    layui.use(['jquery','layer'],function() {
        $ = layui.jquery;
        layer = layui.layer;
    });
    $.ajax({
        url:'/Personnel/getGetKeyword',
        dataType:'json',
        success:function (data) {
            data = data.data;
            var strData = [];
            var numData = [];
            $(data).each(function (index,elem) {
                $('thead > tr').append("<th>"+elem.search+"</th>");
                $('tbody > tr').append("<th>"+elem.hits+"</th>");
                numData.push(elem.hits);
                strData.push(elem.search);
            });
            Chart(numData,strData);
        }
    });


    function Chart(numData,strData) {
        var myChart = echarts.init(document.getElementById('context'));
        option = {
            title: {
                text: '关键字统计图',
                subtext: '思云产品'
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            xAxis: {
                type: 'category',
                data: strData
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: numData,
                    type: 'bar'
                }
            ]
        };
        myChart.setOption(option);
        setTimeout(function (){
            window.onresize = function () {
                myChart.resize();
            }
        },200);
    }


    function refresh() {
        location.reload();
    }
    //返回
    function backOff() {
        var arr = localStorage.getItem("numArr");
        var numArr = arr.split(",");
        numArr.pop();
        window.parent.layui.element.tabChange('tab',numArr[numArr.length - 1]);
        localStorage.setItem("numArr",numArr);
    }
</script>
</html>